<template>
  <div ref="chart" style="width:100%;height:600px"></div>
</template>
<script>
  import { statisticShop} from "@/api/business/report";
  import * as echarts from 'echarts';
  export default {
    name: "xxx",
    data() {
      return {
      };
    },
    created() {

    },
    mounted(){
      this.initChart()
    },
    methods: {
      initChart(){
        const chart = this.$refs.chart
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
              ]
            }
          ]
        };
        echarts.init(chart).setOption(option);
      }
    }
  };
</script>
